<template>
  <div class="sign-out">
    <el-dialog
        :visible.sync="singOutVisible"
        width="400px"
        :modal="true"
        :show-close="false"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :before-close="handleClose">
        <div class="sign-out-content">
          <div class="user-detail">
            <div class="flex">
              <div class="top">
                <div class="flex-top">
                  <p class="img-width"><img src="../assets/images/img1.png" alt=""/></p>
                  <p>£ {{ (signOutData.balance/100).toFixed(2) }}</p>
                </div>
<!--                <div class="flex-top">-->
<!--                  <p class="img-width"><img src="../assets/images/img2.png" alt=""/></p>-->
<!--                  <p>{{ clientData.lastLoginTime | changeTime }}</p>-->
<!--                </div>-->
              </div>
              <div class="head-content">
                <div class="user-img" v-if="userData">
                  <img class="head-img" :src="userData.memberPhoto" alt=""/>
                  <img class="bg"
                       :src="require('../assets/images/bgLeave'+(userData.memberLevel <= 5?userData.memberLevel:((Number(userData.memberLevel)/5)-1))+'.png')"
                       alt=""/></div>
              </div>
              <div class="head-content">
                <div class="dan">
                  <p><img :src="require('../assets/images/leave'+(userData.memberLevel <= 5 ?userData.memberLevel:((Number(userData.memberLevel)/5)-1))+'.png')" alt=""
                          class="sign"/>{{ userData.memberLevel | leveChange }}</p>
                </div>
              </div>
            </div>
            <div class="user-content">
              <p>{{ userData.nickName }}</p>
            </div>
          </div>

          <div class="flex-list">
            <p>Subtotal:</p>
            <p>£{{ signOutData.subtotal }}</p>
          </div>
          <div class="flex-list">
            <p>Vat:</p>
            <p>£{{ signOutData.tax }}</p>
          </div>
          <div class="flex-list">
            <p>Discount:</p>
            <p>£{{ signOutData.discount }}</p>
          </div>
          <div class="flex-list margin">
            <p>Total Price:</p>
            <p>£{{signOutData.total}}</p>
          </div>
          <div class="flex-list">
            <p>Start time:</p>
            <p>{{signOutData.startime}}</p>
          </div>
          <div class="flex-list">
            <p>End   time:</p>
            <p>{{signOutData.endtime}}</p>
          </div>
          <div class="flex-list margin">
            <p>Service Length:</p>
            <p>{{(signOutData.length/60).toFixed(0)}}Mins</p>
          </div>
          <div class="flex-list margin">
            <p>Gaming Free:</p>
            <p>{{(signOutData.freetime/60).toFixed(0)}}Mins</p>
          </div>
        </div>

      <div class="btn">
        <p><el-button @click="handleConfirm">OK</el-button></p>
        <p><el-button @click="handleClose">Cancel</el-button></p>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {checkPayCode} from "@/api/shopMall";
import {mapState} from "vuex";

export default {
  name: "signOut",
  props:{
    singOutVisible:{
      type:Boolean
    },
    userData:{
      type:Object
    },
    signOutData:{
      type:Object
    }
  },
  filters:{
    leveChange(v) {
      let val = ''
      switch (v) {
        case 0:
          val = 'Normal'
          break;
        case 1:
          val = 'GOLD'
          break;
        case 2:
          val = 'Platinum'
          break;
        case 3:
          val = 'Diamond'
          break;
        case 4:
          val = 'Corporate(Team)'
          break;
      }

      return val
    }
  },
  data(){
    return{
      form:{
        password:'',
      },
      type:true,
    }
  },
  computed: {
    ...mapState({comData: state => state.comData.comData})
  },

  created() {
    checkPayCode({memberId: this.comData.memberId}).then(res => {
      this.type = res.data === 202;
    })
  },

  methods:{
    handleClose(){
      this.$emit('handleClose')
    },

    handleConfirm(){
      this.$emit('handleCloseTra','signout')
    }
  }
}
</script>

<style scoped lang="scss">
.sign-out{

  ::v-deep .el-dialog{
    .el-dialog__header{
      padding: 0!important;
    }
    .el-dialog__body{
      border-radius: 20px!important;
      background: #1C1E21;
      padding:  20px 30px!important;
      color: #ffffff;
    }
  }
  .user-detail {
    padding: 10px 0 40px;

    .flex{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .head-content{
    }

    .flex-top{
      display: flex;
      justify-content: flex-start;
    }

    .top {
      line-height: 38px;

      .img-width {
        width: 26px;
        text-align: center;
        margin-right: 10px;

        img {
          height: 29px;
        }
      }
    }

    .user-img {
      width: 74px;
      height: 74px;
      margin-top: -12px;
      position: relative;

      .head-img {
        width: 70px;
        height: 70px;
        position: absolute;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding-top: 12px;
        z-index: 1;
      }

      .bg {
        width: 74px;
        position: relative;
        z-index: 3;
      }
    }

    .dan {
      line-height: 70px;
      color: #FFB24F;

      img {
        float: left;
        margin-top: 22px;
      }
    }

    .user-content {
      text-align: center;
      font-size: 14px;
      border-radius: 4px;
      background-color: #37383A;
      margin-top: 20px;

      p:first-child {
        font-size: 20px;
        padding: 10px 0;
        color: #ffffff;
      }
    }
  }

  .flex-list{
    display: flex;
    justify-content: space-between;
    line-height: 20px;
    color: #D8D8D8;
  }
  .margin{
    margin: 20px 0 30px;
    color: #FFD40E;
  }
  .btn{
    .el-button{
      width: 100%;
      margin-bottom: 16px;
      background: linear-gradient(90deg, #FFE96B 0%, #FFD55C 12%, #FFBC49 32%, #FFAA3C 53%, #FF9F34 75%, #FF9C32 100%);
      border: none;
      outline: none;
      color: #1C1E21;
      border-radius: 30px;
    }
    p:nth-child(2){
      .el-button{
        color: #ffffff;
        background: #37383A;
      }
    }
  }
}
</style>
